<template>
  <div>
    <div class="thead">标签列表
      <div class="addpar"
        @click="showAddTags()">
        <img class="add"
          src="../../images/main/add.png"
          alt> 新增标签
      </div>
    </div>
    <div class="box">
      <div class="top_box">
        <ul class="section_01">
          <li class="nav01">标签内容</li>
          <li class="nav02">更新时间</li>
          <li class="nav03">操作</li>
        </ul>
      </div>
      <div class="next_box">
        <ul class="section_02"
          v-for="(item,index) in tagList"
          :key="index">
          <li class="line01">{{item.name}}</li>
          <li class="line02">{{setDate(item.time)}}&nbsp;&nbsp;{{setTime(item.time)}}</li>
          <li class="line03">
            <a v-if="roleList.search('标签设置') != '-1'" @click="editTags(item.name,item.id)">编辑</a>
            <a v-if="roleList.search('标签设置') != '-1'" @click="delTags(item.id)">删除</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="task"
      v-if="task">
      <div class="bgc">
        <div class="box_tip">
          <div class="tips">{{tagTitle}}</div>
          <div class="btn_x">
            <a class="x"
              @click="closeTag()">×</a>
          </div>
          <hr>
          <input class="text_input"
            type="text"
            placeholder="请输入标签"
            v-model="name"
            @input="tagInput"
            >
          <div class="btn_submit"
            type="submit"
            @click="saveTags()">提交</div>

        </div>
      </div>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="params.page"
      layout="total, prev, pager, next, jumper"
      :total="pageTotal"
      style="text-align:center;margin:20px auto;">
    </el-pagination>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs";
export default {
  created () {
    this.getTagList();
    this.getRole()
  },
  data() {
    return {
      params: {
        page: 1,
        limit: 10
      },
      tagList: [],
      name: "",
      task: false,
      isEdit: false,
      tagTitle: "新增标签",
      tagId: "",
      pageTotal: 1,
      roleList:''
    };
  },
  methods: {
    tagInput(){
      this.name = this.name.replace(/(^\s*)|(\s*$)/g, "");
      if(this.name.length > 8){
        this.name = this.name.substring(0,8)
      }
    },
    /**
     *  获取权限
     */
    getRole: function () {

      let that = this;
      axios({
          method: 'post',
          url:`${that.$store.state.url}/sysPermission/selectByEmployeeId`,
            data:qs.stringify({
              empId:that.$cookie.get('pid')
            })
      }).then(res => {
            console.log(res)
            let arr = res.data.data
            let role = []
            for(let i = 0; i < arr.length; i++) {
              role.push(arr[i].name)
            }
            this.roleList = role.toString()
        });
    },
    handleCurrentChange( argv ) {
      this.params.page = argv;
    },
    /**
     * 显示标签
     */
    showAddTags: function() {
      this.task = true;
      this.isEdit = false;
      this.tagTitle = "新增标签";
      this.name = "";
      this.tagId = "";
    },
    /**
     * 关闭标签修改
     */
    closeTag: function() {
      this.task = false;
    },
    /**
     * 编辑标签
     */
    editTags: function(name, id) {
      this.name = name;
      this.isEdit = true;
      this.task = true;
      this.tagTitle = "编辑标签";
      this.id = id;
    },
    /**
     * 查询标签列表
     */
    getTagList: function() {
      axios({
        method: "post",
        url: `${this.$store.state.url}/tLabel/selectList`,
        data:qs.stringify(this.params)
      }).then(res => {
        if (res.data.code == 0) {
          this.pageTotal = Math.ceil ( res.data.count / 10 );
          this.tagList = res.data.data;
        } else {
          alert(res.msg);
        }
      });
    },
    /**
     * 删除标签
     */
    delTags: function(id) {
      let that = this;
      if (confirm("确认删除?")) {
        axios({
          method: "post",
          url: `${that.$store.state.url}/tLabel/delLabel`,
          data: qs.stringify({ id: id })
        }).then(res => {
          console.log(res);
          if (res.data.code == 0) {
            this.getTagList();
          } else {
            alert(res.msg);
          }
        });
      }
    },
    /**
     * 保存标签
     */
    saveTags: function() {
      let that = this;
      let data = {
        name: that.name,
        id: that.id
      };

      let url = `${that.$store.state.url}/tLabel/addLabel`;
      if (that.isEdit) {
        url = `${that.$store.state.url}/tLabel/updateLabel`;
      }
      axios({
        method: "post",
        url: url,
        data: qs.stringify(data)
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          this.$store.state.fn.success( '保存成功' );
          that.getTagList();
          that.task = false;
        } else {
          this.$alert(res.data.msg);
        }
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth()+1 < 10 ? "0" + (times.getMonth() +1) : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
  }
};
</script>
<style scoped>
.thead {
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  height: 69px;
  line-height: 69px;
  padding-left: 15px;
  background: #f6f6f6;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  font-weight: bold;
  /* margin-left: 26px; */
  /* width: 1488px; */
}
.addpar {
  background: #f6f6f6;
  border: 1px solid #085dab;
  border-radius: 2px;
  width: 107px;
  height: 33px;
  float: right;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 33px;
  margin-top: 17px;
  margin-right: 20px;
  color: #085dab;
  cursor: pointer;
}
.add {
  width: 18px;
  height: 18px;
  float: left;
  margin: 8px;
}
.box {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-bottom: 0;

  box-shadow: 0 2px 4px 0 #dddddd;
  /* width: 1488px; */
  /* display: inline-block; */
  overflow: hidden;
  /* margin-left: 26px; */
  margin-top: 25px;
}
.top_box {
  background: #b7cde6;
  border-bottom: 1px solid #dddddd;
  width: 100%;
  overflow: hidden;
}
.section_01 {
  overflow: hidden;
}
.top_box .section_01 li {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #000000;
  letter-spacing: 0.03px;
  line-height: 67px;
  float: left;
  list-style: none;
  text-align: center;
  width: calc((100% - 2px) / 3);
}

.next_box {
  width: 100%;
  overflow: hidden;
}
.section_02 {
  /* height: calc(433px / 4); */
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
}
.section_02:last-child {
  border-bottom: 0;
}
.section_02 li {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #4a4a4a;
  letter-spacing: 0.03px;
  /* height: calc(433px / 4); */
  float: left;
  list-style: none;
  text-align: center;
  /* line-height: calc(433px / 4); */
  height: 60px;
  line-height: 60px;
  width: calc((100% - 2px) / 3);
}
.section_02 .line03 a {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #085dab;
  letter-spacing: 0.03;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.box_tip {
  background: #ffffff;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  width: 646px;
  height: 399px;
  text-align: center;
  padding-top: 21px;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 2000;
}
.tips {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #000000;
  font-weight: bold;
  height: 35px;
  line-height: 35px;
}
.btn_x {
  background: #9b9b9b;
  width: 86px;
  height: 86px;
  border-radius: 100%;
  position: absolute;
  right: -43px;
  top: -43px;
}
.x {
  font-size: 25px;
  text-decoration: none;
  position: absolute;
  left: 19px;
  bottom: 15px;
  color: #fff;
  font-weight: bold;
}
hr {
  opacity: 0.38;
  background-color: #979797;
  width: 306px;
  height: 2px;
  margin-top: 8px;
}
.text_input {
  margin-top: 103px;
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 311px;
  height: 40px;
  text-align: center;
  font-size: 18px;
  color: #4a4a4a;
}
.btn_submit {
  display: block;
  margin: 84px auto;
  background: #085dab;
  width: 200px;
  height: 45px;
  line-height: 45px;
  padding: 0px;
  margin-bottom: 0px;
  cursor: pointer;
  color: #ffffff;
}
</style>

